<script setup lang='ts'>
import { onMounted } from 'vue';

//定义接受props参数     

// //Vue 3.5+的版本的用法
// const { age = 100 } = defineProps<{
//     name: string,
//     age?: number
// }>()
//Vue 3.5+以下的版本的默认值的设置方法
const props = withDefaults(
    defineProps<{ name?: string, age?: number, func?(count: number): void }>(),
    {
        name: '默认值',
        age: 100,

    }
)
const test = () => {
    // 这里面拿到的是最新的传递过来的数据
    console.log(props.name, props.age);
}
onMounted(() => {
    test()
})
//自定义事件类型
//updateChange-参数1个 number类型
const emits = defineEmits<{
    //key(事件名称):value(参数类型数组)
    "updateAge": [age: number],
    "updateName": [name: string],
    "updateAll": [name: string, age: number]
}>()
//实现子传父
const tpParentsAge = () => {
    emits("updateAge", props.age - 1)
}
const toParentsName = () => {
    emits("updateName", '李四')
}
const toParentsAll = () => {
    emits("updateAll", '王五', props.age + 2)
}

</script>

<template>
    <div class="child">
        <h2>子组件显示父组件传递过来的数据</h2>
        <p>接收的姓名：{{ name }}</p>
        <p>接收的年龄：{{ age }}</p>
        <button @click="func(age - 1)">子组件-回调函数形式</button>
        <button @click="tpParentsAge">子传父改年龄-emits形式</button>
        <button @click="toParentsName">子传父改名字-emits形式</button>
        <button @click="toParentsAll">子传父修改所有-emits形式</button>
    </div>
</template>

<style scoped></style>